<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Html5网页JavaScript录制MP3音频</title>
    <script src="js/recordmp3.js"></script>
    <script src="js/jquery-2.2.4.min.js"></script>
    <meta charset="utf-8"/>
</head>
<body>
<h1>Html5网页JavaScript录制MP3音频</h1>
设备列表：<select id="select-device"></select>
<button  id="btnStart" disabled >录制</button>
<button  id="btnStop"  disabled >停止</button>
<button  id="btnUpload" disabled >上传</button>
<h4>调试信息：</h4>
<div id="recordingslist"></div>

<script>
    $('#btnStart').click(funStart);
    $('#btnStop').click(funStop);
    $('#btnUpload').click(funUpload);

    var recorder = new MP3Recorder({
        debug: true,
        funOk: function () {
            btnStart.disabled = false;
            log('初始化成功');
        },
        funCancel: function (msg) {
            log(msg);
            recorder = null;
        },
        deviceId:null
    });
    recorder.getDeviceList().then(function (deviceList) {
        $('#select-device').append('<option value=“”>未选择</option>')
        deviceList.filter(e => e.deviceId && e.kind.indexOf('audio') !==-1).forEach(device => {
            $('#select-device').append('<option value="'+device.deviceId+'">'+device.label+'</option>')
            //console.log("device", device);
        })
    }).catch(function (error) {
        console.log("找不到媒体设备:", error)
    });

    recorder.init();

    $('#select-device').on('change', function() {
        $("#btnStart").prop('disabled' , true);
        recorder.getConfig().deviceId = this.value;
        recorder.init();
    })

    var mp3Blob;

    function funStart(button) {
        btnStart.disabled = true;
        btnStop.disabled = false;
        btnUpload.disabled = true;
        log('录音开始...');
        recorder.start(true);
    }

    function funStop(button) {
        recorder.stop();
        btnStart.disabled = false;
        btnStop.disabled = true;
        btnUpload.disabled = false;
        log('录音结束，MP3导出中...');
        recorder.getMp3Blob(function (blob) {
            log('MP3导出成功');

            mp3Blob = blob;
            var url = URL.createObjectURL(mp3Blob);
            var div = document.createElement('div');
            var au = document.createElement('audio');
            var hf = document.createElement('a');

            au.controls = true;
            au.src = url;
            hf.href = url;
            hf.download = new Date().toISOString() + '.mp3';
            hf.innerHTML = hf.download;
            div.appendChild(au);
            div.appendChild(hf);
            recordingslist.appendChild(div);
        });
    }

    function log(str) {
        recordingslist.innerHTML += str + '<br/>';
    }

    function funUpload() {
        var fd = new FormData();
        var mp3Name = encodeURIComponent('audio_recording_' + new Date().getTime() + '.mp3');
        // fd.append('mp3Name', mp3Name);
        fd.append('file', new File([mp3Blob], mp3Name, {type: mp3Blob.type}));
        fd.append('fileType', '0');

        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function () {
            if (xhr.status == 200) {
                console.log(xhr)
                recordingslist.innerHTML += '上传成功：<a href="' + xhr.responseText + '" target="_blank">' + mp3Name + '</a>';
            }
        };

        // xhr.open('POST', 'upload.ashx');
        xhr.open('POST', '/SmrSaas/req/fileServer/file/singleUpload')
        xhr.send(fd);
    }
</script>
</body>
</html>
